<ul [ngClass]="styClass">
    <li *ngFor="let tag of tags; let tagIndex = index"
        [ngClass]="{
                'uk-parent': tag.children && tag.children.length
            }">
        <a (click)="nodeClick.emit(tag)"
           class="uk-visible-toggle">
            <div class="uk-grid">
                <div class="uk-width-expand">
                    <ng-container *ngIf="tag.editing; else showName">
                        <input class="uk-form-small uk-input"
                               [(ngModel)]="tag.name"
                               type="text">
                    </ng-container>
                    <ng-template #showName>
                        <label>
                            <input class="uk-checkbox"
                                   type="checkbox"
                                   *ngIf="selectMode !== 'none'"
                                   [(ngModel)]="tag.selected"
                                   (ngModelChange)="selectTagChange(tag)">
                            {{tag.name}}
                        </label>
                    </ng-template>
                </div>
                <div class="uk-width-auto"
                     *ngIf="editorMode">
                    <ul class="uk-invisible-hover uk-iconnav">
                        <ng-container *ngIf="tag.editing; else showNameAction">
                            <li>
                                <a uk-tooltip="确定"
                                   uk-icon="icon: check"
                                   (click)="add(tag)">
                                </a>
                            </li>
                            <li>
                                <a uk-tooltip="删除"
                                   (click)="tags.splice(tagIndex, 1)"
                                   uk-icon="icon: trash">
                                </a>
                            </li>
                        </ng-container>
                        <ng-template #showNameAction>
                            <li *ngIf="!tag.editing">
                                <a uk-tooltip="添加子元素"
                                   uk-icon="icon: arrow-down"
                                   (click)="addAction(tag)">
                                </a>
                            </li>
                        </ng-template>
                        <li>
                            <a uk-tooltip="添加兄弟元素"
                               uk-icon="icon: menu"
                               (click)="addAction()">
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </a>
        <app-components-tags-render
                *ngIf="tag.children && tag.children.length"
                [parentId]="tag.id"
                [tags]="tag.children"
                [selectMode]="selectMode"
                (nodeClick)="nodeClick.emit($event)"
                (selectedChange)="selectedChange.emit($event)"
                styClass="uk-nav-sub">
        </app-components-tags-render>
    </li>
</ul>
